<template>
    <div class="large-demandRate">
        <div id="demandRateChart"></div>
    </div>
</template>

<script lang="ts">
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({
    name: "home",
    components: {},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    chart: any = null;
    mounted() {
        echartLoad(() => {
            this.setChart();
        });
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
        // 启动定时器（每 2 秒切换一次）
        let timer = setInterval(this.autoHighlight, 3000);

        // 鼠标悬停时暂停自动切换
        this.chart.on("mouseover", () => clearInterval(timer));
        this.chart.on("mouseout", () => {
            timer = setInterval(this.autoHighlight, 3000);
        });
    }
    currentIndex = -1;
    timer = null;
    autoHighlight() {
        const dataLen = this.pageData.length;
        // 取消之前的高亮
        this.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 计算下一个索引
        this.currentIndex = (this.currentIndex + 1) % dataLen;
        // 高亮当前数据项
        this.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 显示 Tooltip
        this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("demandRateChart");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            grid: {
                top: 20,
                bottom: 30,
            },

            tooltip: {
                trigger: "axis",
            },
            xAxis: [
                {
                    type: "category",
                    data: this.pageData.map((item) => item.name),
                    axisLine: {},
                    axisLabel: {
                        color: "#333",
                    },
                    axisPointer: {
                        type: "shadow",
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                    name: "",
                    min: 0,
                    max: 110,
                    interval: 110 / 5,
                    axisLabel: {
                        formatter: "{value}",
                        color: "#333",
                    },
                },
            ],
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }
    drawShape() {
        const leftShape = window.echarts.graphic.extendShape({
            buildPath(ctx, shape) {
                const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
                // 侧面宽度
                const WIDTH = 15;
                // 斜角高度
                const OBLIQUE_ANGLE_HEIGHT = 3.6;

                const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
                const p2 = [basicsXAxis - WIDTH, bottomYAxis];
                const p3 = [basicsXAxis, bottomYAxis];
                const p4 = [basicsXAxis, topBasicsYAxis];

                ctx.moveTo(p1[0], p1[1]);
                ctx.lineTo(p2[0], p2[1]);
                ctx.lineTo(p3[0], p3[1]);
                ctx.lineTo(p4[0], p4[1]);
            },
        });

        const rightShape = window.echarts.graphic.extendShape({
            buildPath(ctx, shape) {
                const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
                // 侧面宽度
                const WIDTH = 15;
                // 斜角高度
                const OBLIQUE_ANGLE_HEIGHT = 3.6;

                const p1 = [basicsXAxis, topBasicsYAxis];
                const p2 = [basicsXAxis, bottomYAxis];
                const p3 = [basicsXAxis + WIDTH, bottomYAxis];
                const p4 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];

                ctx.moveTo(p1[0], p1[1]);
                ctx.lineTo(p2[0], p2[1]);
                ctx.lineTo(p3[0], p3[1]);
                ctx.lineTo(p4[0], p4[1]);
            },
        });

        const topShape = window.echarts.graphic.extendShape({
            buildPath(ctx, shape) {
                const { topBasicsYAxis, basicsXAxis } = shape;
                // 侧面宽度
                const WIDTH = 15;
                // 斜角高度
                const OBLIQUE_ANGLE_HEIGHT = 3.6;

                const p1 = [basicsXAxis, topBasicsYAxis];
                const p2 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];
                const p3 = [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT * 2];
                const p4 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];

                ctx.moveTo(p1[0], p1[1]);
                ctx.lineTo(p2[0], p2[1]);
                ctx.lineTo(p3[0], p3[1]);
                ctx.lineTo(p4[0], p4[1]);
            },
        });

        window.echarts.graphic.registerShape("leftShape", leftShape);
        window.echarts.graphic.registerShape("rightShape", rightShape);
        window.echarts.graphic.registerShape("topShape", topShape);
    }

    getSeries() {
        this.drawShape()
        return [
            {
                name: "科技成果",
                type: "custom",
                color: "#27A6FF",
                barWidth: "30",
                tooltip: {
                    valueFormatter: function (value) {
                        return value + "%";
                    },
                },
                data: this.pageData.map((item) => item.percentage),
                renderItem(params, api) {
                    // 基础坐标
                    const basicsCoord = api.coord([api.value(0), api.value(1)]);
                    // 顶部基础 y 轴
                    const topBasicsYAxis = basicsCoord[1];
                    // 基础 x 轴
                    const basicsXAxis = basicsCoord[0];
                    // 底部 y 轴
                    const bottomYAxis = api.coord([api.value(0), 0])[1];
                    return {
                        type: "group",
                        children: [
                            {
                                type: "leftShape",
                                shape: {
                                    topBasicsYAxis,
                                    basicsXAxis,
                                    bottomYAxis,
                                },
                                style: {
                                    fill: '#1D92E4'
                                },
                            },
                            {
                                type: "rightShape",
                                shape: {
                                    topBasicsYAxis,
                                    basicsXAxis,
                                    bottomYAxis,
                                },
                                style: {
                                    fill: "#27A6FF"
                                },
                            },
                            {
                                type: "topShape",
                                shape: {
                                    topBasicsYAxis,
                                    basicsXAxis,
                                    bottomYAxis,
                                },
                                style: {
                                    fill: "#27A6FF"
                                },
                            },
                        ],
                    };
                },
            },
        ];
    }
}
</script>
<style lang="scss">
.large-demandRate {
    margin-top: 10px;
    height: 22vh;
    flex-grow: 1;
    #demandRateChart {
        width: 100%;
        height: 100%;
    }
}
</style>
